<template>
	<view>
		<u-navbar :safeAreaInsetTop="true" leftIconColor="#fff" :autoBack="true" bgColor="#000" placeholder>
			<view class="headtab" slot="center">
				<u-tabs :list="list4" lineWidth="38rpx" lineColor="#E3432D" lineHeight='9rpx' :activeStyle="{
				            color: '#fff',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#747474',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 28rpx; padding-right: 28rpx; height: 58rpx;font-size:31rpx;">

				</u-tabs>

			</view>
			<u-icon name="search" color="#fff" slot='right' size="50rpx"></u-icon>
		</u-navbar>
		<view class="" style="position: relative;"
			:style="{height: 'calc(100vh - 44px - 113rpx - '+$u.addUnit($u.sys().statusBarHeight + $u.sys().safeAreaInsets.bottom,'px')+')'}">
			<DomVideoPlayer ref="domVideoPlayer"
				src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4" autoplay loop muted />
			<view class="marsk" @click="playOrPause">
				<view class="info">
					<view class="info__goods" @click.stop="navto('/pages/goods/details')">
						<view class="info__goods__iconbox">
							<u-icon name='shopping-cart-fill' color="#fff"></u-icon>
						</view>
						<view class="info__goods__title">
							购物
						</view>
						<view class="info__goods__line">
							
						</view>
						<view class="info__goods__name">
							网易严选爱宠猫粮
						</view>
					</view>
					<view class="info__title">
						时光匆匆
					</view>
					<view class="info__content">
						这小猫咪也太可爱了吧.简直要把我梦话了
					</view>
				</view>
				<view class="right">
					<view class="right__tx">
						<image src="/static/cao/tx.png" class="right__tx__pic" mode="aspectFill"></image>
						<view class="right__tx__jia">
							<u-icon name="plus" color="#fff"></u-icon>
						</view>
					</view>
					<view class="right__item">
						<image src="/static/post/xin.png" style="width: 76rpx;height: 70rpx;" mode=""></image>
						109
					</view>
					<view class="right__item" @click.stop="show=true">
						<image src="/static/post/pf.png" style="width: 56rpx;height: 51rpx;" mode=""></image>
						26
					</view>
					
					<view class="right__item">
						<image src="/static/post/sc.png" style="width: 63rpx;height: 63rpx;" mode=""></image>
						30
					</view>
					<view class="right__item">
						<image src="/static/post/zf.png" style="width: 60rpx;height: 47rpx;" mode=""></image>
						12
					</view>
				</view>
				<view class="play" v-if="!isplay">
					<image src="/static/scroll-video/play.png" class="play__icon" mode=""></image>
				</view>
			</view>
		</view>
		<view class="footer" :style="{paddingBottom:$u.addUnit($u.sys().safeAreaInsets.bottom,'px')}">
			<view class="footer__in">
				<input type="text" class="footer__inp" placeholder="发布评论..." placeholder-style="color:#FFFFFF;" />
				<view class="footer__btn">
					发布
				</view>
			</view>
		</view>
		<u-popup mode="bottom" :show="show" round="30rpx" @close="show=false" :closeable="true">
			<view class="popbox">
				<view class="popbox__title">
					共112条评论
				</view>
				<scroll-view scroll-y="true" :style="{height: 'calc(100% - 113rpx - 115rpx - '+$u.addUnit($u.sys().safeAreaInsets.bottom,'px')+')'}">
					<view class="popbox__list">
						<view class="popbox__list__item" v-for="(item,index) in 10" :key="index">
							<view class="u-flex u-flex-y-center">
								<image src="/static/cao/tx.png" class="popbox__list__tx" mode="aspectFill"></image>
								<view class="" style="flex: 1;">
									<view class="popbox__list__name">
										未来
									</view>
									<view class="popbox__list__time">
										05-18 18:24    
									</view>
								</view>
								<image src="/static/goods/good.png" class="popbox__list__dz" mode=""></image>
								<view class="popbox__list__num">
									3
								</view>
							</view>
							<view class="popbox__list__cont">
								小朋友好厉害啊，学了几年了啊，看的我也好像 学习，好酷啊
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list4: [{
						name: '推荐',
					},
					{
						name: '关注',
					},
				],
				show:false,
				isplay:true
			};
		},
		methods: {
			playOrPause() {
				const videoPlayer = this.$refs.domVideoPlayer
				// 获取 video 当前是否处于播放中
				if (videoPlayer.playing) {
					videoPlayer.pause()
				} else {
					videoPlayer.play()
				}
				this.isplay=!videoPlayer.playing
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #000;
	}

	.headtab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 36rpx 0 10rpx;
		width: 600rpx;
	}

	.footer {
		height: 113rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 30rpx;
		z-index: 10078;
		position: relative;
		background-color: #000000;
		&__in{
			height: 73rpx;
			background: rgba(254, 254, 254, .2);
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			padding: 0 4rpx 0 40rpx;
			display: flex;
			align-items: center;
			flex: 1;
		}
		&__inp{
			flex: 1;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		&__btn{
			width: 118rpx;
			height: 64rpx;
			background: #E3432D;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFD;
			line-height: 24rpx;
			
		}
	}
	.marsk{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.play{
		position: absolute;
		width: 120rpx;
		height: 120rpx;
		top: calc(50% - 60rpx);
		left: calc(50% - 60rpx);
		background-color: rgba(0,0,0,.5);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		&__icon{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.info{
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 30rpx 50rpx;
		&__title{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 37rpx;
			color: #FFFFFF;
			line-height: 35rpx;
			margin-bottom: 30rpx;
		}
		&__content{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 27rpx;
			color: #FFFFFF;
			line-height: 26rpx;
		}
		&__goods{
			display: flex;
			align-items: center;
			padding: 0 38rpx 0 12rpx ;
			height: 67rpx;
			background: rgba(1, 1, 1, .5);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-bottom: 30rpx;
			&__iconbox{
				width: 43rpx;
				height: 42rpx;
				background: #E3432D;
				border-radius: 5rpx 5rpx 5rpx 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&__title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				margin-left: 13rpx;
			}
			&__line{
				width: 2rpx;
				height: 23rpx;
				background: #B4AFAB;
				margin: 0 14rpx;
			}
			&__name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}
		}
	}
	.right{
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		bottom: 100rpx;
		right: 4rpx;
		&__tx{
			width: 110rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 4rpx solid #FFFFFF;
			border-radius: 50%;
			position: relative;
			&__pic{
				width: 110rpx;
				height: 110rpx;
				background: #FFBD7D;
				border-radius: 50%;
			}
			&__jia{
				position: absolute;
				bottom: -20rpx;
				right: 30rpx;
				width: 54rpx;
				height: 41rpx;
				border-radius: 20rpx;
				background-color: #ff4b3a;
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
		}
		&__item{
			width: 110rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 25rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			margin-top: 40rpx;
		}
	}
	.popbox{
		height: 75vh;
		&__title{
			color: #231815;
			font-size: 28rpx;
			padding: 0 50rpx;
			height: 115rpx;
			display: flex;
			align-items: center;
		}
		&__list{
			padding: 0 60rpx 1rpx 51rpx;
			&__item{
				margin-bottom: 65rpx;
				
			}
			&__tx{
				width: 63rpx;
				height: 65rpx;
				background: #888A8C;
				border-radius: 50%;
				margin-right: 12rpx;
			}
			&__name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				line-height: 26rpx;
			}
			&__time{
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 22rpx;
				color: #929292;
				line-height: 22rpx;
				margin-top: 16rpx;
			}
			&__dz{
				width: 33rpx;
				height: 31rpx;
				margin-right: 10rpx;
			}
			&__num{
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 30rpx;
				margin-top: 10rpx;
			}
			&__cont{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				margin-top: 26rpx;
			}
		}
	}
</style>